<template>
	<div>
		<h2 data-v-034e6e73="" id="svgImage">
			SvgImage 图片 <img @click="jump('api','smooth')" data-v-abf2c1f6="" style="width: 32px;height: 32px;"
				src="../../static/img/to_api.png"></h2>
		<el-divider></el-divider>
		<!-- 组件源码 -->
		<h3 data-v-e74a3c6e="">组件源码</h3>
		<folding-panel @close="jump('code1')" id="code1">
			<div id="">
				<p class="describe">
					在 <span class="parameter">components</span> 文件夹下创建名字为 <span class="parameter">dev-svg-image</span>
					的文件夹，用来存放当前组件。
				</p>
				<p class="describe">
					在 <span class="parameter">dev-svg-image</span> 文件夹下创建 <span
						class="parameter">dev-svg-image.vue</span> 将以下代码复制进去。
				</p>
			</div>
			<dev-highlightjs autodetect :code="interfaceData.basic_examples"></dev-highlightjs>
		</folding-panel>
		<folding-panel @close="jump('code2')" id="code2">
			<div id="">
				<p class="describe">
					在 <span class="parameter">dev-svg-image</span> 文件夹下创建 <span class="parameter">base64.js</span>
					将以下代码复制进去。
				</p>
			</div>
			<dev-highlightjs autodetect :code="interfaceData.base64"></dev-highlightjs>
		</folding-panel>
		<folding-panel @close="jump('code3')" id="code3">
			<div id="">
				<p class="describe">
					在 <span class="parameter">dev-svg-image</span> 文件夹下创建 <span class="parameter">svg.js</span>
					将以下代码复制进去。
				</p>
			</div>
			<dev-highlightjs autodetect :code="interfaceData.svg"></dev-highlightjs>
		</folding-panel>
		<!-- 基本使用 -->
		<h3 data-v-e74a3c6e="">基本使用</h3>
		<div id="">
			<p class="describe">
				通过 <span class="parameter">mode</span>定义要使用的图片类型，默认使用<span class="parameter">svg</span>类型图片，可以传入<span
					class="parameter">image</span>使用jpg/png等类型图片。
			</p>
			<p class="describe">
				根据源码引入完毕后，直接在界面中使用，默认展示的为：右箭头。
			</p>
			<dev-highlightjs autodetect :code="interfaceData.default_use"></dev-highlightjs>
			<p class="describe">
				使用其他svg图片的方式有两种，一种是直接通过<span class="parameter">svg-code</span>属性传入，另一种是先在svg.js文件中
				进行配置，然后通过<span class="parameter">svg-name</span>属性传入。
			</p>
			<p class="describe">
				通过<span class="parameter">svg-code</span>属性传入，方式如下：
			</p>
			<dev-highlightjs autodetect :code="interfaceData.svg_code_use"></dev-highlightjs>
			<p class="describe">
				通过<span class="parameter">svg-name</span>属性传入，方式如下：
			</p>
			<dev-highlightjs autodetect :code="interfaceData.svg_name_use"></dev-highlightjs>
			<p class="describe">
				动态修改svg图片颜色，目前只支持单颜色修改，如果svg代码中含有多种颜色的情况下，只会修改您传入的颜色。
			</p>
			<p class="describe">
				当您通过<span class="parameter">svg-code</span>属性使用的svg图时，您需要同时传入<span
					class="parameter">initial-color</span>初始颜色（也可以理解为要修改的颜色），
				<span class="parameter">modify-color</span>修改后的颜色。例子如下：
			</p>
			<dev-highlightjs autodetect :code="interfaceData.svg_code_color"></dev-highlightjs>
			<p class="describe">
				当您通过<span class="parameter">svg-name</span>属性使用的svg图时，您只需传入，
				<span class="parameter">modify-color</span>修改后的颜色，但前提是您已经在svg.js中配置了初始颜色，例子如下：
			</p>
			<dev-highlightjs autodetect :code="interfaceData.svg_name_color"></dev-highlightjs>
		</div>

		<h3 id="api" data-v-e74a3c6e="">API</h3>
		<dev-table mode="Props" :data="tableData"></dev-table>
		<el-backtop :visibility-height="1" :right="100" :bottom="100" />
	</div>
</template>

<script>
	import exampleData from './example.js'
	export default {
		created() {
			this.interfaceData = exampleData;
		},
		data() {
			return {
				interfaceData: {}, //界面数据
				tableData: [{
						parameter: 'mode', //参数
						explain: '当前使用的模式 svg 或 image', //说明
						type: 'String', //类型
						defaultValue: 'svg', //默认值
						optionalValue: 'image', //可选值
					},
					{
						parameter: 'svg-name',
						explain: '当在svg.js中录入svg代码后,可以在mode为svg的情况下直接使用,name来显示图片',
						type: 'String',
						defaultValue: 'rightArrow',
						optionalValue: 'svg.js中已存在name',
					},
					{
						parameter: 'svg-code', //参数
						explain: 'svg代码', //说明
						type: 'String', //类型
						defaultValue: '--', //默认值
						optionalValue: '--', //可选值
					},
					{
						parameter: 'initial-color',
						explain: 'svg代码初始颜色,默认不传,如需修改颜色,此值为必传值',
						type: 'String',
						defaultValue: '--',
						optionalValue: '--',
					},
					{
						parameter: 'modify-color',
						explain: '修改后的颜色,当需要修改svg颜色时传入,需配合initial-color使用',
						type: 'String',
						defaultValue: '--',
						optionalValue: '--',
					},
					{
						parameter: 'image-url',
						explain: '当mode为image时,自定义图片地址',
						type: 'String',
						defaultValue: '--',
						optionalValue: '--',
					},
					{
						parameter: 'width',
						explain: '图片宽度,默认宽度为40rpx',
						type: 'String | Number',
						defaultValue: '40',
						optionalValue: '--',
					},
					{
						parameter: 'height',
						explain: '图片高度,默认高度为40rpx',
						type: 'String | Number',
						defaultValue: '40',
						optionalValue: '--',
					},
					{
						parameter: 'picture-style',
						explain: '自定义图片样式',
						type: 'Object',
						defaultValue: '--',
						optionalValue: '--',
					},
					{
						parameter: 'open-debug',
						explain: '是否打开调试,打开后在png和svg的情况下可以展示当前组件背景颜色',
						type: 'Boolean',
						defaultValue: 'false',
						optionalValue: 'true',
					},
					{
						parameter: 'is-left-image',
						explain: '是否显示左侧icon图',
						type: 'Boolean',
						defaultValue: 'false',
						optionalValue: 'true',
					},
					{
						parameter: 'is-right-image',
						explain: '是否显示右侧icon图',
						type: 'Boolean',
						defaultValue: 'true',
						optionalValue: 'false',
					},
					{
						parameter: 'is-num',
						explain: '是否显示消息数',
						type: 'Boolean',
						defaultValue: 'false',
						optionalValue: 'true',
					},
					{
						parameter: 'number',
						explain: '消息数字值',
						type: 'String | Number',
						defaultValue: '0',
						optionalValue: '--',
					},
					{
						parameter: 'max-num',
						explain: '消息数字最大值',
						type: 'String | Number',
						defaultValue: '99',
						optionalValue: '--',
					},
					{
						parameter: 'num-width',
						explain: '消息框宽度',
						type: 'String | Number',
						defaultValue: '36',
						optionalValue: '--',
					},
					{
						parameter: 'num-height',
						explain: '消息框高度',
						type: 'String | Number',
						defaultValue: '36',
						optionalValue: '--',
					},
					{
						parameter: 'num-radius',
						explain: '消息框圆角',
						type: 'String | Number',
						defaultValue: '18',
						optionalValue: '--',
					},
					{
						parameter: 'font-size',
						explain: '消息文字大小',
						type: 'String | Number',
						defaultValue: '12',
						optionalValue: '--',
					},
					{
						parameter: 'num-color',
						explain: '消息文字颜色',
						type: 'String',
						defaultValue: '#FFFFFF',
						optionalValue: '--',
					},
					{
						parameter: 'num-bg-color',
						explain: '消息框背景颜色',
						type: 'String',
						defaultValue: '#FF333A',
						optionalValue: '--',
					},
					{
						parameter: 'num-top',
						explain: '消息框距离图片顶部距离',
						type: 'String | Number',
						defaultValue: '-10',
						optionalValue: '--',
					},
					{
						parameter: 'num-right',
						explain: '消息框距离图片右边距离',
						type: 'String | Number',
						defaultValue: '-12',
						optionalValue: '--',
					},
					{
						parameter: 'num-left',
						explain: '消息框距离图片左边距离',
						type: 'String | Number',
						defaultValue: '--',
						optionalValue: '--',
					},
					{
						parameter: 'num-bottom',
						explain: '消息框距离图片底部距离',
						type: 'String | Number',
						defaultValue: '--',
						optionalValue: '--',
					},
					{
						parameter: 'default-img-url',
						explain: '图片默认域名地址',
						type: 'String',
						defaultValue: '--',
						optionalValue: '直接在组中进行自定义',
					}





				],

				// {
				// 	parameter: '',
				// 	explain: '',
				// 	type: 'String',
				// 	defaultValue: '',
				// 	optionalValue: '',
				// }

			}
		},
		methods: {
			//优化跳转，缓慢滚动到指定位置
			async goAnchor(selector, method) {
				/*method 为字符串时,scrollIntoViewOptions只赋值behavior的参数,如需修改整,其他参数需传递object对象,
				可传参数如下:
				{
				    behavior: "auto"  | "instant" | "smooth",
				    block:    "start" | "end",
				} */
				let [dataType, scrollIntoViewOptions] = [false, {
					behavior: 'instant'
				}];
				//判断是否传递跳转方法
				if (method) {
					dataType = Object.prototype.toString.call(method) === '[object Object]';
					if (dataType) {
						scrollIntoViewOptions = method;
					} else {
						scrollIntoViewOptions.behavior = method;
					}
				}
				let anchor = await new Promise((resolve, reject) => {
					return resolve(this.$el.querySelector(selector)) // 获取元素
				})
				if (anchor) {
					anchor.scrollIntoView(scrollIntoViewOptions) // js的内置方法，可滚动视图位置至元素位置
				}
			},
			//进行跳转到指定 id 元素
			jump(val, method) { // 点击跳转的方法 val 你定义的需要跳转的标签id 此方法可以根据自己的实际情况编辑
				this.goAnchor('#' + val, method)
			}

		}

	}
</script>

<style>

</style>
